<template>
  <mt-header class="mix1px" fixed v-bind:title="title">
    <a slot="left" @click='goback'>
      <mt-button>
        <i v-bind:class="iconer" class="iconfont"></i>
      </mt-button>
    </a>
    <router-link v-bind:to="rightPageTo || ''" slot="right">
      <mt-button class="right" v-on:click="action">
        <i v-bind:class="rightIcon" class="iconfont"></i>
        {{actionTitle}}
      </mt-button>
    </router-link>
  </mt-header>
</template>

<script>
  /**
   * @module common/plugins/header
   * @author ashen
   * @description 页头
   * @param  {String} title - 页面id或者class
   *         {String} page-to -填写为指定地址  不填写默认回退
   * @example <dc-header :page-to="'/hello'" :title="'龙决策'" :icon="'icon-register-account'"></dc-header>
   * @example <dc-header  :title="'龙决策'" :icon="'icon-register-account'"></dc-header>

   */
  export default {
    /**
     * @property {String}  title     - 页面标题.
     * @property {String}  pageTo    - 顶部图标需要跳转的页.当配置了icon不配置pageTo时，默认返回上一页
     * @property {String}  rightPageTo  - 右侧图标需要跳转的页.
     * @property {String}  icon      - 顶部图标.当配置了pageTo不配置icon时，默认为返回图标
     * @property {String}  rightIcon   - 右侧图标.
     * @property {String}  actionTitle   - 右侧操作名称.
     * @property {String}  action   - 右侧操作.
     */
    props: {
      title: String,
      pageTo: String,
      rightPageTo: {},
      icon: String,
      rightIcon: String,
      actionTitle: String
    },
    data () {
      return {
      };
    },
    computed: {
      iconer: function () {
        if (this.icon) {
          return this.icon;
        } else {
          if (this.pageTo) {
            return 'icon-header-back';
          }
        }
      }
    },
    methods: {
      action: function () {
        var callNow = !this.timeout;
        if (this.timeout) clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.timeout = null;
        }, 1000);
        if (callNow) {
          this.$emit('submit');
        }
        /*clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.$emit('submit');
        }, 0);*/
      },
      goback: function () {
        if (this.pageTo) {
          this.$router.push(this.pageTo);
        } else {
          this.$router.go(-1);
        }
      }
    }
  };
</script>

<style lang="scss">
  @import "../assets/css/variable";

  .mint-header {
    height: px2rem(88px);
    background-color: #fafafa;
    i.iconfont {
      font-size: px2rem(48px);
      color: #595959;
    }
    .mint-header-title {
      font-size: px2rem(36px);
      font-weight: 600;
      line-height: 1.1;
      color: #333;
    }
    .right {
      color: $theme-color;
      font-weight: bold;
      font-size: px2rem(32px);
      i.iconfont {
        font-size: px2rem(36px);
        color: inherit;
        vertical-align: baseline;
      }
    }
  }
</style>
